<template>
  <section>
    <el-table
      :data="list"
      :row-key="rowKey"
      style="width: 100%;"
      cell-class-name="m-cell-class"
      :header-cell-class-name="'m-cell-class m-gray'"
      @selection-change="onSelect"
    >

      <el-table-column
        v-if="config.showIndex"
        width="55"
        type="index"
      >
      </el-table-column>

      <el-table-column
        v-if="config.showSelection"
        width="55"
        type="selection"
        :reserve-selection="true"
      ></el-table-column>

      <el-table-column
        v-for="item in header"
        :key="item.prop"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
        :sortable="item.sortable"
        :show-overflow-tooltip="item.showOverflowTooltip"
      >
        <template #default="{ row }">
          <div>{{row[item.prop]}}</div>
          <i
            v-if="item.iconClass"
            :class="item.iconClass"
          ></i>
        </template>
      </el-table-column>

      <!--用于自定义操作栏-->
      <slot name="append"></slot>

    </el-table>

    <el-pagination
      v-if="showPagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="size"
      :current-page="number"
      @size-change="setSize"
      @current-change="setNumber"
    ></el-pagination>
  </section>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

import { TableConfig, useTable } from './baseTable';

export default defineComponent({
  name: 'BaseTable',

  emits: ['selectChange'],

  props: {
    id: {
      type: String,
      default: 'id'
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    config: {
      type: Object as PropType<TableConfig>,
      default: () => ({})
    }
  },

  setup(props, ctx) {
    const {
      list,
      size,
      number,
      total,
      header,
      rowKey,
      setSize,
      setNumber,
      onSelect
    } = useTable(props, ctx);

    return {
      list,
      header,
      size,
      number,
      total,
      rowKey,
      setSize,
      setNumber,
      onSelect
    };
  }
});
</script>

<style lang="scss" scoped>
:deep(.el-pagination) {
  text-align: end;
  padding-top: 10px;
}

:deep(.el-table) {
  $padding: 9px;
  height: 462px;

  .m-cell-class {
    padding: $padding 0;
    text-align: center;

    .el-button {
      min-height: 22px;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .m-gray {
    background: #f4f4f5;
  }
}
</style>
